<template>
	<view class="set-withdrawal-password">
		<view class="content">
			<uv-form>
				<uv-form-item prop="password" borderBottom>
					<uv-input
						v-model="form.password"
						placeholder="请输入6位提现密码"
						type="number"
						maxlength="6"
						border="none"
					></uv-input>
				</uv-form-item>
				<uv-form-item prop="phone" borderBottom>
					<uv-input v-model="form.phone" placeholder="请输入手机号码" type="number" border="none" readonly></uv-input>
				</uv-form-item>
				<uv-form-item prop="code" borderBottom>
					<uv-input v-model="form.code" placeholder="请输入手机验证码" type="number" maxlength="6" border="none">
						<template #suffix>
							<uv-button :text="tips" @click="handleStart" type="primary"></uv-button>
						</template>
					</uv-input>
				</uv-form-item>
			</uv-form>
		</view>
		<uv-code @end="handleEnd" ref="codeRef" @change="codeChange"></uv-code>
	</view>
</template>

<script setup>
import { ref } from "vue";
import { onShow } from "@dcloudio/uni-app";

const codeRef = ref();

const form = ref({
	password: "",
	phone: "",
	code: ""
});

const tips = ref("获取验证码");

const handleStart = () => {
	codeRef.value.start();
};

const codeChange = (text) => {
	tips.value = text;
};

const handleEnd = () => {};

const handleGetMobile = () => {
	const userInfo = uni.getStorageSync("uni-id-pages-userInfo");
	if ((form.value.phone = userInfo.mobile)) {
		form.value.phone = userInfo.mobile;
	} else {
		uni.showModal({
			title: "提示",
			content: "未绑定手机号",
			cancelText: "返回",
			confirmText: "前往绑定",
			success: (result) => {
				if (result.confirm) {
					uni.navigateTo({
						url: "/uni_modules/uni-id-pages/pages/userinfo/bind-mobile/bind-mobile"
					});
				} else {
					uni.navigateBack();
				}
			}
		});
	}
};

onShow(() => {
	handleGetMobile();
});
</script>

<style lang="scss" scoped>
.set-withdrawal-password {
	height: 100%;
	display: flex;
	flex-direction: column;

	.content {
		flex: 1;
		padding: 20px;
	}
}
</style>
